import { t } from 'i18next'
import { useState } from 'react'
import { Tab, Button, Space } from '@kedacom/react-next'
import { usePersonalConfig } from './service'
import { StyledWrap } from './style'
import MeetingHeader from '@/components/MeetingHeader'
import DefaultSetting from './DefaultSetting'
import CommonOperations from './CommonOperations'
import TerminalOperations from './TerminalOperations'
import useInit from '@/hooks/useInit'
import { defaultPersonalConfig } from '@/api/personalConfig/interface'
import WebRecommendBrowser from '@/components/WebRecommendBrowser'
import { getUrlParams } from '@/utils'

function App() {
	const [tabIndex, setTabIndex] = useState<number>(getUrlParams('tab') === 'mcc_operate' ? 3 : 1)
	const { personalConfigInfo, dispatch, saveConfigInfo, restoreConfigInfo } = usePersonalConfig()
	useInit()
	return (
		<>
			<WebRecommendBrowser />
			<MeetingHeader tabIndex={5} />
			<StyledWrap>
				<div className="personal-config-top">
					<Tab
						type="button"
						data={[
							{
								label: t('默认显示'),
								value: 1,
							},
							{
								label: t('终端快捷操作'),
								value: 2,
							},
							{
								label: t('会控常用操作'),
								value: 3,
							},
						]}
						value={tabIndex}
						onChange={(e, value) => {
							setTabIndex(value)
						}}
					></Tab>
					<Space className="personal-config-btn" space={5}>
						{/* 
						执行事件
						*/}
						<Button onClick={saveConfigInfo}>{t('保存')}</Button>
						<Button onClick={restoreConfigInfo}>{t('取消')}</Button>
					</Space>
				</div>
				{/* 
				DefaultSetting 默认显示
				*/}
				{tabIndex === 1 && (
					<DefaultSetting configInfo={personalConfigInfo} propsChange={dispatch}></DefaultSetting>
				)}
				{/* 
				TerminalOperations 终端快捷操作
				*/}
				{tabIndex === 2 && (
					<TerminalOperations
						configInfo={personalConfigInfo.mt_operate}
						defaultInfo={defaultPersonalConfig.mt_operate}
						/*
						# 事件传递到子组件
						
						## 在父组件传递
						propsChange={dispatch}
						## 在子组件使用
						propsChange({ type: 'setMonitor', payLoad: val })
						*/
						propsChange={dispatch}
					></TerminalOperations>
				)}
				{/* 
				CommonOperations 会控常用操作
				*/}
				{tabIndex === 3 && (
					<CommonOperations
						configInfo={personalConfigInfo.mcc_operate}
						defaultInfo={defaultPersonalConfig.mcc_operate}
						propsChange={dispatch}
					></CommonOperations>
				)}
			</StyledWrap>
		</>
	)
}
export default App
